<template>
	<div class="wrap">
		<div class="text">
			<h1 class="title">产品服务</h1>
			<div class="content">
				这里是内容简介，比如一些描述性文字，还可以是其他的文字，这里是示例效果
			</div>
		</div>
		<div class="content_box">
			<div class="box_page">
				<div class="page_card" @click="setType(1)" :style="data.show1">
					<div class="card_picture"></div>
					<div class="card_title">大数据服务</div>
				</div>
				<div class="page_card" @click="setType(2)" :style="data.show2">
					<div class="card_picture"></div>
					<div class="card_title">互联网内容服务</div>
				</div>
				<div class="page_card" @click="setType(3)" :style="data.show3">
					<div class="card_picture"></div>
					<div class="card_title">工业物联网服务</div>
				</div>
			</div>
			<div class="page_content" v-if="data.type === 1">
				<div class="photo1"></div>
			</div>
			<div class="page_content" v-if="data.type === 2">
				<div class="photo2"></div>
			</div>
			<div class="page_content" v-if="data.type === 3">
				<div class="photo3"></div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	let data = ref<{
    type:number;
    show1:string|undefined;
    show2:string|undefined;
    show3:string|undefined;
  }>({
		type: 1,
		show1: undefined,
		show2: "background:#5a5b5c;color:#3e3f3f",
		show3: "background:#5a5b5c;color:#3e3f3f",
	});
	function setType(name: number) {
		data.value.type = name;
		if (name === 1) {
			data.value.show1 = undefined;
			data.value.show2 = "background:#5a5b5c;color:#3e3f3f";
			data.value.show3 = "background:#5a5b5c;color:#3e3f3f";
		}
		if (name === 2) {
			data.value.show2 = undefined;
			data.value.show1 = "background:#5a5b5c;color:#3e3f3f";
			data.value.show3 = "background:#5a5b5c;color:#3e3f3f";
		}
		if (name === 3) {
			data.value.show3 = undefined;
			data.value.show1 = "background:#5a5b5c;color:#3e3f3f";
			data.value.show2 = "background:#5a5b5c;color:#3e3f3f";
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 110vh;
		background: #f0f4fb;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		> .text {
			display: flex;
			flex-direction: column;
			align-items: center;
			> .title {
				margin-top: 150px;
			}
			> .content {
				margin: 30px 0px;
			}
		}
		> .content_box {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 1520px;
			> .box_page {
				display: flex;
				> .page_card {
					// background: rgba(97, 96, 96, 0.3);
					// color:rgb(97, 96, 96,);
					height: 140px;
					width: 240px;
					margin: 10px;
					padding: 10px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-color: #ebeef5;
					border-style: solid;
					border-radius: 2px;
					box-shadow: #838181 0px 2px 12px 0px;
					> .card_picture {
						width: 220px;
						height: 100px;
						background-image: url("@/assets/photo4.jpg");
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
					> .card_title {
						margin-top: 10px;
					}
				}
			}
			> .page_content {
				width: 1520px;
				margin-top: 50px;
				height: 90%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				> .photo1 {
					width: 100%;
					height: 100%;
					background-image: url("@/assets/photo1.jpg");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-bottom: 50px;
				}
				> .photo2 {
					width: 100%;
					height: 100%;
					background-image: url("@/assets/photo2.jpg");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-bottom: 50px;
				}
				> .photo3 {
					width: 100%;
					height: 100%;
					background-image: url("@/assets/photo3.jpg");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-bottom: 50px;
				}
			}
		}
	}
</style>
